<template>
  <view :class="classes">
    <text class="axq-title-text">
      <slot></slot>
    </text>
    <slot name="sub"></slot>
  </view>
</template>

<script>
export default {
  name: 'AxqTitle',
  components: {},
  props: {
    border: Boolean
  },
  data () {
    return {}
  },
  computed: {
    classes () {
      let res = 'axq-title'
      if (this.border) {
        res += ' axq-title--border'
      }
      return res
    }
  },
  methods: {
  }
}
</script>

<style lang="less">
.axq-title{
  display: flex;
  padding-left: 20rpx;
  &-text{
    display: inline-block;
    position: relative;
    padding: 28rpx 20rpx;
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: 6rpx;
      height: 30rpx;
      background: @color-theme;
      border-radius: 3rpx;
      transform: translateY(-50%);
    }

  }
  &--border{
    border-bottom: 2rpx solid #e6e6e6;
  }
  .unit{
    padding: 28rpx 20rpx;
    font-size: 34rpx;
  }
}
</style>